<template>

  <div class="home">
    <!-- 头部搜索框 -->
    <header class="head">
      <my-search></my-search>
    </header>
    <!-- 轮播图部分 -->

     
 
    <!-- 中间主体部分 -->
    <main class="main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList">
      <img :src="item.img1" alt=""  style="height: 200px; width: 100%;"/>
    </van-swipe-item>
</van-swipe>
      <van-tabs v-model:active="active" @click="onClickTab" sticky animated offset-top="54px" v-show="showTabs" swipeable>
        <van-tab title="首页" > 
          
          <div>
            <span><b>已上架图书</b></span>
            <h4 class="more" @click="clickMore">更多</h4>
            <van-list
  
            >
              <div class="books-item" v-for="item in booksArr">
                <img :src="item.img" alt="">
                <h6>{{ item.title }}</h6>
              </div>
            </van-list>

            <span><b>书吧推荐</b></span>
            <h4 class="more" @click="clickMore">更多</h4>
            <van-list

            >
              <div class="books-item" v-for="item in booksArr">
                <img :src="item.img" alt="">
                <h6>{{ item.title }}</h6>
              </div>
            </van-list>

            <span><b>热门借阅</b></span>
            <h4 class="more" @click="clickMore">更多</h4>
            <van-list

            >
              <div class="books-item" v-for="item in booksArr">
                <img :src="item.img" alt="">
                <h6>{{ item.title }}</h6>
              </div>
            </van-list>
          </div>

        </van-tab>
        <van-tab title="发现" >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="哥，已经到底了"
            @load="onLoad"
            >
            <div v-for="item in booksArr1" style="display: flex;margin: 10px auto;">
                <div style="width: 30%;">
                  <img :src="item.img" alt="">
                </div>
                <div style="flex:1;width: 70%;font-size: 12px;">
                  <h6>我是一本书</h6>
                  <span>{{ item.title }}</span>
                </div>
              </div>
          </van-list>
        </van-tab>
      </van-tabs>
     <!-- 弹出框 -->
     <van-popup  v-model:show="show" >
      <div class="gonggao">
          <p style="text-align: center; font-size: 20px; color: red;">公告</p>
          <p style="margin-top: 20px; text-align: center; ">预祝书吧越来越好</p>
      </div>
      <div class="title" @click="close">
        知道了
      </div>
    </van-popup>
    </main>
    <!-- 底部 -->
    <footer class="foot">
      <my-footer></my-footer>
    </footer>


  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {onMounted} from 'vue'
import MySearch from "@/components/MySearch.vue";
import MyFooter from "@/components/MyFooter.vue";

import {getGoodsListAPI,getBannerAPI} from '@/api/goodsApi'
import IBooks from "@utils/type"
import { useRouter } from "vue-router";

let show = ref(true)
//loading 加载状态 
let loading = ref<boolean>(false);

let finished = ref<boolean>(false);

// 图书列表
let booksArr:Array<IBooks> = reactive<Array<IBooks>>([])
let booksArr1:Array<IBooks> = reactive<Array<IBooks>>([])

// 轮播图列表
let bannerList =reactive([])

getBannerAPI({}).then((res:any)=>{
  console.log(res.data);
  bannerList.push(...res.data)
  
})

// 控制标签栏显示隐藏
let showTabs = ref(true)


// tab标签切换
const active = ref(0);
const title = ref('');

let $router = useRouter()

const onClickTab = ((tabindex:any)=>{
  if(tabindex.target.textContent=='首页'){
    console.log('首页')

  }else if(tabindex.target.textContent=='发现'){
    console.log('发现')

  }
})
const checkflag = (()=>{
  console.log(123456);
  
  if(!localStorage.getItem('flag')){
    show.value = true
  }else{
    show.value = false
  }
})


const onLoad = ()=>{
  checkflag()
  getGoodsListAPI({
    page:1
  }).then(res=>{
    console.log(res);
    if(res.code == 200){
      booksArr.push(...res.goodList.slice(0, 3))
      booksArr1.push(...res.goodList)


      loading.value = false;
      finished.value = true
    }
  })
}
onLoad()

const clickMore = ()=>{
  $router.push('/More')
}

function close(){
  show.value = false
  localStorage.setItem('flag',show.value)

}
 


</script>

<style scoped lang="less">
.home{
  display: flex;
  flex-direction: column;
  height: 100%;
  width:100%;

  .head{
    height: 54px;
    background-color: #4fc08d;
  }

  .main{
    flex: 1;
    padding:0px 10px;
    overflow-y: auto;
  }
  .more{
    float: right;
  }
  .van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .books-item{
    margin-bottom: 10px;

    width: 30%;
    img{
      width: 100%;
    }
  }

  .foot{
    height: 50px;
  }
}
.gonggao{
  width: 300px;
  height: 300px;
  // background-image: url("https://img2.baidu.com/it/u=4042475256,124552582&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691082000&t=4050efd546546beddc1c2174bbba75e9");
  // background-repeat: no-repeat;
  // background-size: cover;
  padding-top: 50px;
}
.title{
  height: 50px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background-color: #4fc08d;
  line-height: 50px;
}

.van-list__finished-text {
  margin-left: 87px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }


</style>